<template>
	<div class="foot">
		<div class="switch1">
			<div class="left" @click="switchEmptyFull">
				<span :class="{off:this.isEmptyFullCart}">空车</span>
				<span :class="{on:!this.isEmptyFullCart}">载客</span>
			</div>
		</div>
		<div class="switch2">
			<div class="center" @click="switchOffOn">
				<span :class="{off:this.isSoundsOffOn}">关</span>
				<span>提醒</span>
				<span :class="{on:!this.isSoundsOffOn}">开</span>
			</div>
		</div>
		<div class="switch1">
			<div class="right" @click="switchInOut">
				<span :class="{off:this.isInOutCart}">收车</span>
				<span :class="{on:!this.isInOutCart}">出车</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
				isEmptyFullCart:true,
				isInOutCart:true,
				isSoundsOffOn:true
			}
	    },
	    methods: {
			// 有客无客功能
	        switchEmptyFull(){
				this.isEmptyFullCart = !this.isEmptyFullCart;
	        },
			// 收车出车功能
			switchInOut(){
				this.isInOutCart = !this.isInOutCart;
			},
			// 声音开关功能
			switchOffOn(wordTemp){
				// if(this.isSoundsOffOn){
				// 	var test = "测试文字转语音功能test";
				// 	var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+encodeURI(test);
				// 	var n = new Audio(url);
				// 	n.src = url;
				// 	n.play();
				// }
				this.isSoundsOffOn = !this.isSoundsOffOn;
			}
	    }
	}
</script>

<style scoped>
	.foot{
		width:100%;
		height:90rpx;
		overflow:hidden;
		position:fixed;
		bottom:0;
		left:0;
		display:flex;
		justify-content:space-between;
		background:rgb(236,236,236);
		line-height:90rpx;
	}
	.switch1{
		flex:3;
		padding:0 10rpx;
	}
	.switch2{
		flex:4;
		padding:0 10rpx;
	}
	.left,.right,.center{
		height:80rpx;
		border-radius:40rpx;
		background:#484848;
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	span{
		width:80rpx;
		height:80rpx;
		line-height:80rpx;
		text-align:center;
		color:#fff;
		font-size:32rpx;
		font-family:"宋体";
	}
	span.off{
		background:#F1F1F1;
		color:#484848;
		border-radius:50%;
	}
	span.on{
		background:#4CD964;
		color:rgb(157,243,251);
		border-radius:50%;
	}
</style>

